<script setup lang="ts">
import { ref } from "vue";

import ItemWrap from "@/components/item-wrap";
import LeftTop from "./left-top.vue";
import LeftBottom from "./left-bottom.vue";
import RightTop from "./right-top.vue";
import RightBottom from "./right-bottom.vue";
import CenterTable from "./center-table.vue";
// import CenterMap from "./centerMap_vice.vue";
import CenterMap from "./centerMapVice.vue";
// import CenterMap from "./mapTest.vue";
// import CenterMap from "@/components/gaode-map/example.vue";


import NavIndex from "./navIndex.vue";
import CenterNavTop from "./center-nav-top.vue";

import NavPage from "@/components/navPage/index.vue";



const CenterMapRef = ref<InstanceType<typeof CenterMap>>()
const CenterNavTopRef = ref<InstanceType<typeof CenterNavTop>>()
const LeftBottomRef = ref<InstanceType<typeof LeftBottom>>()
const LeftTopRef = ref<InstanceType<typeof LeftTop>>()
const RightTopRef = ref<InstanceType<typeof RightTop>>()
const RightBottomRef = ref<InstanceType<typeof RightBottom>>()




const handleNavChange = (index: number, item: any) => {
    console.log(index, item);
}

import { getDataInfo, getDataTotal } from "@/api/port";
import { onMounted, toRaw } from "vue";
const dataInfo = ref<any>({})
const pointList = ref<any[]>([])
const totalInfo = ref<any>({})
onMounted(() => {
  getDataInfo({type: 1}).then((res) => {
    console.log(res);
    dataInfo.value = res.data

    if (CenterMapRef.value) {
        let list = JSON.parse(res.data.module6)
        list.map((item: any, index: number) => {
            item.id = index + 1
        })
        pointList.value = list
        CenterMapRef.value.getPointData(list)
    }
    
    if (RightBottomRef.value) {
        RightBottomRef.value.init(res.data.module5)
    }

  });
  getDataTotal().then((res) => {
    console.log(res);
    totalInfo.value = res.data
    if (LeftTopRef.value) {
        LeftTopRef.value.init(JSON.stringify(res.data.module1Data))
    }
    
    if (LeftBottomRef.value) {
        LeftBottomRef.value.init(JSON.stringify(res.data.module2Data))
    }
    if (RightTopRef.value) {
        RightTopRef.value.init(JSON.stringify(res.data.module3Data))
    }
    if (CenterNavTopRef.value) {
        CenterNavTopRef.value.getNavData(JSON.stringify(res.data.module4Data))
    }
  })
});
const handleMarkerClick = (e: any) => {
    console.log(e)
    let list = pointList.value
    let obj = list.find((item: any) => item.id == e)
    console.log(obj)

    if (LeftTopRef.value) {
        LeftTopRef.value.upData(JSON.stringify(obj.module1Data))
    }
    
    if (LeftBottomRef.value) {
        LeftBottomRef.value.upData(JSON.stringify(obj.module2Data))
    }

    if (RightTopRef.value) {
        RightTopRef.value.upData(JSON.stringify(obj.module3Data))
    }
    // if (RightBottomRef.value) {
    //     RightBottomRef.value.init(JSON.stringify(obj.module4Data))
    // }
    if (CenterNavTopRef.value) {
        CenterNavTopRef.value.getNavData(JSON.stringify(obj.module4Data))
    }
}

const handleMarkerRightClick = (e: any) => {


    if (LeftTopRef.value) {
        LeftTopRef.value.upData(JSON.stringify(totalInfo.value.module1Data))
    }
    
    if (LeftBottomRef.value) {
        LeftBottomRef.value.upData(JSON.stringify(totalInfo.value.module2Data))
    }

    if (RightTopRef.value) {
        RightTopRef.value.upData(JSON.stringify(totalInfo.value.module3Data))
    }
    if (RightBottomRef.value) {
        RightBottomRef.value.init(JSON.stringify(totalInfo.value.module4Data))
    }
}
</script>

<template>
    <div class="green-power-box">
        <!-- 左侧区域 -->
        <div class="content_left">
            <ItemWrap class="content_lr-item" title="瞬时功率曲线" style="height: 300px;">
                <LeftTop ref="LeftTopRef" />
            </ItemWrap>
            <ItemWrap class="content_lr-item" title="发电柱图" style="flex: 1;">
                <LeftBottom ref="LeftBottomRef" />

            </ItemWrap>
        </div>

        <!-- 中间区域 -->
        <div class="content_center">
            <CenterNavTop ref="CenterNavTopRef" />

            <!-- <ItemWrap class="content_lr-item" title="分布图">
                <CenterMap />
            </ItemWrap> -->
            <CenterMap class="contetn_center_top" title="分布图" ref="CenterMapRef" @markerClick="handleMarkerClick" @markerRightClick="handleMarkerRightClick" />

            <NavPage @nav-change="handleNavChange" :nav-index="0" />
            <!-- <ItemWrap class="content_center-table" title="绿电供应详细数据">
                <CenterTable />
            </ItemWrap> -->
            <!-- <ItemWrap class="content_lr-item" title="区域发电对比">
                <NavIndex />
            </ItemWrap> -->
        </div>

        <!-- 右侧区域 -->
        <div class="content_right">
            <ItemWrap class="content_lr-item" title="弃电利用量" style="flex: 1;">
                <RightTop ref="RightTopRef" />

            </ItemWrap>
            <ItemWrap class="content_lr-item" title="弃电接收量" style="height: auto;">
                <RightBottom ref="RightBottomRef" />

            </ItemWrap>
        </div>
    </div>
</template>

<style scoped lang="less">
.green-power-box {
    width: 100%;
    display: flex;
    min-height: calc(100% - 64px);
    justify-content: space-between;
    gap: 20px;
}

// 左边 右边 结构一样
.content_left,
.content_right {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    width: 540px;
    box-sizing: border-box;
    // flex-shrink: 0;
}

.content_center {
    // flex: 1;
    width: calc(100% - 40px - 540px - 540px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    .content_center-table {
        height: 300px;
        margin-top: auto;
    }
}

.content_lr-item {
    height: 50%;
    // height: 310px;
    // flex: 1;
}
.contetn_center_top{
    flex: 1;
}
</style>